<!--  -->
<template>
  <div class='homeBusiness' style="display:flex">
    <div class="homeBusiness-left">
      <div v-for='it in pageLeft' :key='it.label' :style="{ height:'17.5%',marginBottom:'2%'}" :class="it.class">
        <div class="top" style="border-bottom:1px solid ;display:flex" :style="{borderColor:it.color}">
          <div style="margin-bottom:1px;width:90%;font-size:18px; color:#fff;font-weight:700">{{it.label}}</div>
          <div><img :src='it.icon'></div>
        </div>
        <div class="bottom" :style="{color:it.colorText}">
          <div style="display:flex">
            <div class="status" style="flex:1.5">
              状态：<span class="whiteText">{{it.des}}</span>
            </div>
            <div class="sys" style="flex:2">
              系统：<span class="whiteText">{{it.sys}}</span>
            </div>
          </div>
          <div>
            创建时间：<span class="whiteText">{{it.time}}</span>
          </div>
        </div>

      </div>

    </div>
    <div class="homeBusiness-middle">
      <div class="bottom">
      </div>
      <div class="bottomPic">
        <div v-for='it in pageMb' :key='it.text'>
          <div>
            <div><img :src="it.icon" alt=""></div>
            <div> {{it.text}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="homeBusiness-right">
      <div class="title" style="">
        <span class="titleText">资产信息</span> <img class="titleImg" :src="titleSrc" />
      </div>
      <div class="right-content">
        <div class="rightItem" v-for='it in pageR' :key='it.label' style="display:flex">
          <div class="left"><img class="" :src="it.img" /></div>
          <div class="right">
            <div class="num">{{it.num}}</div>
            <div>{{it.label}}</div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      titleSrc: "/static/B1/business/rightArrow.png",
      color: ["#3557ef", "#8249ea", "#bc7345", "#b84676", "#53b8f2"],
      pageLeft: [
        {
          label: "大规模渗透-阻塞干扰",
          icon: "/static/B1/business/ing.png",
          bgImg: "/static/B1/business/lefting.png",
          class: "ing",
          color: "#839ba5",
          colorText: "#11baf7",
          des: "正在进行",
          sys: "SYQZ",
          time: "2022-04-16 11:05:29"
        },
        {
          label: "流量分析",
          icon: "/static/B1/business/finished.png",
          bgImg: "/static/B1/business/leftFinish.png",
          des: "已完成",
          colorText: "#3152f7",
          color: "#878ca3",
          class: "finish",
          sys: "SYQZ",
          time: "2022-04-16 11:05:29"
        },
        {
          label: "精准渗透",
          icon: "/static/B1/business/init.png",
          bgImg: "/static/B1/business/leftInit.png",
          des: "初始化",
          colorText: "#8d3ff2",
          color: "#9489a3",
          class: "initical",
          sys: "SYQZ",
          time: "2022-04-16 11:05:29"
        },
        {
          label: "ACK泛洪",
          icon: "/static/B1/business/init.png",
          bgImg: "/static/B1/business/leftInit.png",
          des: "初始化",
          color: "#9489a3",
          colorText: "#8d3ff2",
          class: "initical",
          sys: "SYQZ",
          time: "2022-04-16 11:05:29"
        },
        {
          label: "目标刺探",
          icon: "/static/B1/business/finished.png",
          bgImg: "/static/B1/business/lefting.png",
          des: "已完成",
          color: "#f1945",
          colorText: "#3152f7",
          class: "finish",
          sys: "SYQZ",
          time: "2022-04-16 11:05:29"
        },
        {
          label: "拓扑探测",
          icon: "/static/B1/business/init.png",
          bgImg: "/static/B1/business/leftInit.png",
          des: "初始化",
          color: "#9489a3",
          class: "initical",
          colorText: "#8d3ff2",
          sys: "SYQZ",
          time: "2022-04-16 11:05:29"
        }
      ],
      pageMb: [
        {
          icon: "/static/B1/business/xxtc.png",
          text: "信息探测"
        },
        {
          icon: "/static/B1/business/stzr.png",
          text: "渗透植入"
        },
        {
          icon: "/static/B1/business/grzs.png",
          text: "阻塞干扰"
        },
        {
          icon: "/static/B1/business/fsy.png",
          text: "反溯源"
        },
        {
          icon: "/static/B1/business/fyfk.png",
          text: "防御反馈"
        }
      ],
      pageR: [
        {
          img: "/static/B1/business/server.png",
          label: "服务器",
          num: 129
        },
        {
          img: "/static/B1/business/exboard.png",
          label: "二层交换机",
          num: 132
        },
        {
          img: "/static/B1/business/client.png",
          label: "服客户端务器",
          num: 65
        },
        {
          img: "/static/B1/business/virtual.png",
          label: "虚拟机",
          num: 98
        },
        {
          img: "/static/B1/business/router.png",
          label: "路由器",
          num: 135
        },
        {
          img: "/static/B1/business/gateway.png",
          label: "网关",
          num: 109
        },
        {
          img: "/static/B1/business/firewall.png",
          label: "防火墙",
          num: 83
        }
      ]
    };
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {},
  created() {}
};
</script>
<style  src="../../../../style/wxsy.less" scoped></style>
<style >
</style>